<!--
* description: 资料录入/编辑
* author: wangjuan
* createdDate:2020-11-25
-->
<template>
  <section class="editDataEntry">
    <el-dialog
      v-dialogDrag
      :title="textMap[popupsState]"
      :visible="popupsVisible"
      :modal-append-to-body="false"
      width="70%"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <p class="prompt">注：合同为PDF格式、其他资料为JPG格式（以扫描件形式上传）、身份证正反面在同一页</p>
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-title">车辆信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList1" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :data-to-object="comp.dataToObj"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">发票信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList2" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents2.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">行驶证信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList3" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents3.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">开票人信息（企业）</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList4" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents4.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>
      <div class="filter-container filter-title">开票人信息（个人）</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList5" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents5.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">操作记录</div>
      <div class="">
        <one-table-template
          ref="multipleTable"
          :dynamic-table-cols="tableCols"
          :dynamic-api-config="apiConfig"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="false"
          :dynamic-is-show-more-btn="true"
          :dynamic-is-init-table="true"
          :dynamic-table-defult-height="350"
        />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          :fixed="true"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div>

      <inEdit
        :key="inEditPopupsKey"
        :data-for-form="formField"
        :popups-visible="inEditPopupsVisible"
        :popups-state="inEditPopupsState"
        @closeInEdit="closeInEdit"
      />
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import inEdit from './inEdit.vue'
import api from '@/api/subsidyManage'

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader'),
    inEdit
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {
    dynamicEditRowData: { type: Object, default: () => { return {} } },
    // 弹出是否显示
    popupsVisible: { type: Boolean, default: false },
    customObj: { type: Object, default: () => { return {} } }
  },

  data() {
    const viewPageCode = 'dataEntry-edit'

    return {
      inEditPopupsKey: 'inEditPopupsKey',
      inEditPopupsState: '',
      editRowData: {},
      inEditPopupsVisible: false,

      // 网格查询API配置对象
      apiConfig: api.queryLog,

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          icon: 'iconfont  icon-preservation',
          clickEvent: () => this.inEdit(),
          text: this.$t('sys.button.save') /* 保存*/,
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          icon: 'iconfont  icon-cancel',
          clickEvent: () => this.closeEdit(),
          text: this.$t('sys.button.cancel') // 取消
        }
      ],
      tableComponents: [],
      // 动态组件-查询条件
      tableComponents1:
       [
         {
           compKey: 'compKey1',
           labelName: '合格证编号：',
           codeField: 'qualifiedCertNo',
           component: () => import('@/components/org/commonInput'),
           type: 'inputText',
           disabled: true,
           isMust: true
         },
         {
           compKey: 'compKey2',
           labelName: '车辆制造日期：',
           codeField: 'produceDate',
           component: () => import('@/components/org/commonInput'),
           type: 'inputText',
           disabled: true,
           isMust: true
         },
         {
           compKey: 'compKey3',
           labelName: '车型名称：',
           codeField: 'carConfigCn',
           component: () => import('@/components/org/commonInput'),
           type: 'inputText',
           disabled: true,
           isMust: true
         },
         {
           compKey: 'compKey4',
           labelName: '补贴上牌省份：',
           codeField: 'provinceId',
           textField: 'licenseLocationProvince',
           oFields: 'provinceId,provinceName',
           component: () => import('@/components/org/commonSelect'),
           type: 'dropdownList',
           customObj: {
             api: api.listOfProvinces
           },
           isRequire: true,
           isMust: true
         },
         {
           compKey: 'compKey5',
           labelName: '补贴上牌城市：',
           codeField: 'cityId',
           textField: 'licenseLocationCity',
           oFields: 'cityId,cityName',
           parentFileds: 'value:provinceId-provinceId',
           component: () => import('@/components/org/commonSelect'),
           type: 'dropdownList',
           customObj: {
             api: api.listOfCities,
             listQuery: {
               provinceId: ''
             }
           },
           isRequire: true,
           isMust: true
         }
       ],

      // 动态组件-查询条件
      tableComponents2:
        [
          {
            compKey: 'compKey6',
            labelName: '发票号码：',
            codeField: 'invoiceNo',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey7',
            labelName: '开票日期：',
            codeField: 'invoiceDate',
            component: () => import('@/components/org/datePicker/datePicker'),
            type: 'datePicker',
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey8',
            labelName: 'VIN码：',
            codeField: 'vin',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            isMust: true
          },
          {
            compKey: 'compKey9',
            labelName: '开票价格：',
            codeField: 'invoicePrice',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            // validrule: {
            //   noRequire: true,
            //   // 保留一到两位小数
            //   isformat: /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,
            //   min: 1,
            //   max: 1000000,
            //   resectMessage: {
            //     isformat: '价格最多保留两位小数!'
            //   }
            // },
            // isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey10',
            labelName: '销货单位名称：',
            codeField: 'dlrFullName',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            isMust: true
          },
          {
            compKey: 'compKey11',
            labelName: '发票扫描件：',
            codeField: 'invoiceFile',
            component: () => import('@/components/ve/imageUpload'),
            dataToObj: { fileUrl: '/mp/file/notice/upload.do' },
            type: 'inputText',
            isRequire: true,
            isMust: true,
            span: 24
          }
        ],

      // 动态组件-查询条件
      tableComponents3:
        [
          {
            compKey: 'compKey12',
            labelName: '行驶证注册日期：',
            codeField: 'licenseDate',
            component: () => import('@/components/org/datePicker/datePicker'),
            type: 'datePicker',
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey13',
            labelName: '行驶证所有人：',
            codeField: 'licenseBelong',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey14',
            labelName: '车牌号码：',
            codeField: 'carLicenseNo',
            // validrule: { iscPattern: true },
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey15',
            labelName: 'VIN码：',
            codeField: 'vin',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey16',
            labelName: '品牌型号：',
            codeField: 'bandCode',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey17',
            labelName: '使用性质：',
            codeField: 'carUseProp',
            lookuptype: 'VE1085',
            component: () => import('@/components/org/LookupValue'),
            type: 'dropdownList',
            isRequire: true,
            isMust: true
          },
          {
            compKey: 'compKey18',
            labelName: '行驶证扫描件：',
            codeField: 'drlFile',
            component: () => import('@/components/ve/imageUpload'),
            dataToObj: { fileUrl: '/mp/file/notice/upload.do' },
            isRequire: true,
            isMust: true,
            span: 24
          }
        ],

      // 动态组件-查询条件
      tableComponents4:
        [
          {
            compKey: 'compKey19',
            labelName: '企业名称：',
            codeField: 'enterpriseName',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          },
          {
            compKey: 'compKey20',
            labelName: '统一社会信用代号',
            codeField: 'socialCode',
            component: () => import('@/components/org/commonInput'),
            validrule: { maxlength: 50 },
            type: 'inputText',
            isMust: true
          },
          {
            compKey: 'compKey21',
            labelName: '企业联系电话：',
            codeField: 'enterprisePhone',
            validrule: { isTel: true },
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          },
          {
            compKey: 'compKey22',
            labelName: '企业地址：',
            codeField: 'enterpriseAdd',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true,
            span: 24
          },
          {
            compKey: 'compKey23',
            labelName: '营业执照扫描件：',
            codeField: 'enterpriseFile',
            component: () => import('@/components/ve/imageUpload'),
            dataToObj: { fileUrl: '/mp/file/notice/upload.do' },
            isMust: true,
            span: 24
          }
        ],
      tableComponents5: [
        {
          compKey: 'compKey24',
          labelName: '个人姓名：',
          codeField: 'corpName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'compKey25',
          labelName: '个人身份证号：',
          codeField: 'corpCredNo',
          validrule: { iscP: true },
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'compKey26',
          labelName: '个人联系电话：',
          codeField: 'corpRepPhone',
          validrule: { isPhone: true, maxlength: 11 },
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'compKey27',
          labelName: '个人地址：',
          codeField: 'corpAddress',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 24
        },
        {
          compKey: 'compKey28',
          labelName: '个人身份证扫描件：',
          codeField: 'corpFile',
          component: () => import('@/components/ve/imageUpload'),
          dataToObj: { fileUrl: '/mp/file/notice/upload.do' },
          type: 'inputText',
          isMust: true,
          span: 24
        }
      ],

      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'releaseId',
              label: '主键ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'subsidyId',
              label: '补贴资料id',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'logType',
              label: '操作类型'
            },
            {
              prop: 'logContent',
              label: '操作说明'
            },
            {
              prop: 'logMen',
              label: '操作人'
            },
            {
              prop: 'logTime',
              label: '操作时间'
            }
          ],

      // 标题
      textMap: {
        edit: '录入/编辑补贴信息'
      },

      // 表单数据（无需赋值，由混入对象赋值）
      formField:
      this.$utils.getFormField(this, {
        qualifiedCertNo: '',
        produceDate: '',
        carConfigCn: '',
        provinceId: '',
        cityId: '',
        invoiceNo: '',
        invoiceDate: '',
        invoicePrice: '',
        dlrShortName: '',
        licenseDate: '',
        licenseBelong: '',
        carLicenseNo: '',
        vin: '',
        bandCode: '',
        carUseProp: '',
        enterpriseName: '',
        socialCode: '',
        enterprisePhone: '',
        enterpriseAdd: '',
        corpName: '',
        corpCredNo: '',
        corpRepPhone: '',
        corpAddress: '',
        invoiceScan: '',
        updateControlId: '',
        subsidyId: '',
        subSaleOrderCode: '',
        colStatu: '',
        custType: '',
        dlrFullName: '',
        invoiceFile: '',
        drlFile: '',
        enterpriseFile: '',
        corpFile: ''
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    }
  },

  watch: {
    popupsVisible(val) {
      // debugger
      if (this.dynamicEditRowData.custType === '2') {
        this.tableComponents4.forEach((v, i) => {
          v.isRequire = true
        })
        this.tableComponents5.forEach((v, i) => {
          v.isRequire = false
        })
      } else if (this.dynamicEditRowData.custType === '1') {
        this.tableComponents5.forEach((v, i) => {
          v.isRequire = true
        })
        this.tableComponents4.forEach((v, i) => {
          v.isRequire = false
        })
      }
    }
  },

  created() {
    this.tableComponents = [...this.tableComponents1, ...this.tableComponents2, ...this.tableComponents3, ...this.tableComponents4, ...this.tableComponents5]
  },

  methods: {
    // 新增/编辑保存按钮
    inEdit(cb) {
      const resultA = this.tableComponents
        .filter(o => o.isRequire)
        .reduce((resultA, item) => {
          if (this.$refs['true' + item.compKey][0].$children[0].$children.length === 4) {
            const validComp = this.$refs['true' + item.compKey][0].$children[0].$children[3]
            this.$utils.validataRules(validComp, this.formField[item.codeField] || '')
            resultA.push(validComp.iconV)
          } else if (this.$refs['true' + item.compKey][0].$children[0].$children.length === 3) {
            const validComp = this.$refs['true' + item.compKey][0].$children[0].$children[2]
            this.$utils.validataRules(validComp, this.formField[item.codeField] || '')
            resultA.push(validComp.iconV)
          }
          return resultA
        }, [])
      if (!resultA.includes('1')) {
        this.inEditPopupsVisible = true
      } else {
        if (typeof cb === 'function') {
          cb.call(0)
        }
      }
    },

    // 关闭弹窗
    closeEdit(type) {
      this.$emit('closeEdit', type)
    },

    // 关闭保存弹窗
    closeInEdit() {
      this.inEditPopupsVisible = false
      this.inEditPopupsKey = this.$utils.generateId()
    }
  }

}
</script>

<style lang="scss" scoped>
  .filter-title{
    font-size: 18px;
    font-weight: bolder;
  }
  .filter-container.filter-title::before{
    border-left: 4px solid #0075FF;
    padding-right: 10px;
    height: 20px;
    left: 0px;
    top: 4px;
  }
  .prompt{
    color: #e70020;
    width: 100%;
    height: 45px;
    position: absolute;
    left: 15px;
    top: 25px;
    margin-top: 10px;
  }
  /deep/.el-dialog__body{
    margin-top: 30px;
    height: 500px;
  }
  /deep/.filter-params .el-col {
    margin-bottom: 15px;
  }
  /deep/.filter-params .el-col label{
    width: 95px;
  }
  /deep/.el-upload{
    float: left;
  }
</style>
